<template>
	<div class="app-container">
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['environment:set:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['environment:set:edit']">修改</el-button>
			</el-col>

		</el-row>

		<el-table v-loading="loading" :data="setList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="所属档案区" width="100" align="center" prop="areaNo" />
			<el-table-column label="最低温度" align="center" prop="minTemperature" />
			<el-table-column label="最高温度" align="center" prop="maxTemperature"/>
			<el-table-column label="最低湿度" align="center" prop="minHumidity" />
			<el-table-column label="最高湿度" align="center" prop="maxHumidity" />
			<el-table-column label="最低pm25" width="150" align="center" prop="minPm25" />
			<el-table-column label="最高pm25" width="150" align="center" prop="maxPm25" />
			<el-table-column label="最低pm10" width="150" align="center" prop="minPm10" />
			<el-table-column label="最高pm10" width="150" align="center" prop="maxPm10" />
			<el-table-column label="更新时间" align="center" prop="updatetime" width="180">
				<template #default="scope">
					<span>{{ parseTime(scope.row.updatetime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作人" align="center" prop="user.userName" />
			<!-- <el-table-column label="是否短信报警" width="150" align="center" prop="isSms" />
			<el-table-column label="温湿度间隔" width="150" align="center" prop="temInterval" />
			<el-table-column label="水浸报警间隔" width="150" align="center" prop="waterInterval" />
			<el-table-column label="烟感报警间隔" width="150" align="center" prop="smokeInterval" />
			<el-table-column label="红外报警间隔" width="150" align="center" prop="infraredInterval" />
			<el-table-column label="空气质量报警间隔" width="150" align="center" prop="airInterval" />
			<el-table-column label="报警信息接收人" width="150" lign="center" prop="alarmPhone" />
			<el-table-column label="报警邮件接收人" width="200" align="center" prop="alarmEmail" /> -->
			<!-- <el-table-column label="状态" align="center" prop="status" /> -->
			<el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['environment:set:edit']">修改</el-button>
					<el-button type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['deposit:shelves:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
		 @pagination="getList" />

		<!-- 添加或修改阈值设置对话框 -->
		<el-dialog :title="title" v-model="open" width="500px" append-to-body>
			<el-form ref="setRef" :model="form" :rules="rules" label-width="160px">
				<el-form-item label="所属档案区" prop="areaNo">
					<el-tree-select v-model="form.areaNo" :data="ArchiveArchAreaList" :props="{ value: 'archAreaNo', label: 'arhcAreaName', children: 'children' }"
					 value-key="id" placeholder="请选择库房名称" check-strictly />
				</el-form-item>
				<el-form-item label="最低温度" prop="minTemperature">
					<el-input v-model="form.minTemperature" type="number" placeholder="请输入最低温度" />
				</el-form-item>
				<el-form-item label="最高温度" prop="maxTemperature">
					<el-input v-model="form.maxTemperature" type="number" placeholder="请输入最高温度" />
				</el-form-item>
				<el-form-item label="最低湿度" prop="minHumidity">
					<el-input v-model="form.minHumidity" type="number" placeholder="请输入最低湿度" />
				</el-form-item>
				<el-form-item label="最高湿度" prop="maxHumidity">
					<el-input v-model="form.maxHumidity" type="number" placeholder="请输入最高湿度" />
				</el-form-item>
				<el-form-item label="最低pm25" prop="minPm25">
					<el-input v-model="form.minPm25"  type="number" placeholder="请输入最低pm25" />
				</el-form-item>
				<el-form-item label="最高pm25" prop="maxPm25">
					<el-input v-model="form.maxPm25" type="number" placeholder="请输入最高pm25" />
				</el-form-item>
				<el-form-item label="最低pm10" prop="minPm10">
					<el-input v-model="form.minPm10" type="number" placeholder="请输入最低pm10" />
				</el-form-item>
				<el-form-item label="最高pm10" prop="maxPm10">
					<el-input v-model="form.maxPm10" type="number" placeholder="请输入最高pm10" />
				</el-form-item>
			<!-- 	<el-form-item label="是否短信报警" prop="isSms">
					<el-input v-model="form.isSms" placeholder="请输入是否短信报警" />
				</el-form-item>
				<el-form-item label="温湿度间隔" prop="temInterval">
					<el-input v-model="form.temInterval" placeholder="请输入温湿度间隔" />
				</el-form-item>
				<el-form-item label="水浸报警间隔" prop="waterInterval">
					<el-input v-model="form.waterInterval" placeholder="请输入水浸报警间隔" />
				</el-form-item>
				<el-form-item label="烟感报警间隔" prop="smokeInterval">
					<el-input v-model="form.smokeInterval" placeholder="请输入烟感报警间隔" />
				</el-form-item>
				<el-form-item label="红外报警间隔" prop="infraredInterval">
					<el-input v-model="form.infraredInterval" placeholder="请输入红外报警间隔" />
				</el-form-item>
				<el-form-item label="空气质量报警间隔" prop="airInterval">
					<el-input v-model="form.airInterval" placeholder="请输入空气质量报警间隔" />
				</el-form-item>
				<el-form-item label="报警信息接收人" prop="alarmPhone">
					<el-input v-model="form.alarmPhone" placeholder="请输入报警信息接收人" />
				</el-form-item>
				<el-form-item label="报警邮件接收人" prop="alarmEmail">
					<el-input v-model="form.alarmEmail" placeholder="请输入报警邮件接收人" />
				</el-form-item> -->
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Set">
	import {
		listSet,
		getSet,
		delSet,
		addSet,
		updateSet
	} from "@/api/environment/set";
	import { listArchiveArchArea } from "@/api/archive/ArchiveArchArea";

	const {
		proxy
	} = getCurrentInstance();

	const setList = ref([]);
	const open = ref(false);
	const loading = ref(true);
	const showSearch = ref(true);
	const ids = ref([]);
	const single = ref(true);
	const multiple = ref(true);
	const total = ref(0);
	const title = ref("");
	const ArchiveArchAreaList = ref([]);

	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			minHumidity: null,
			maxHumidity: null,
			minPm25: null,
			maxPm25: null,
			minPm10: null,
		},
		rules: {
			storehouseId: [{
				required: true,
				message: "档案区id不能为空",
				trigger: "blur"
			}],
			minTemperature: [{
				required: true,
				message: "最低温度不能为空",
				trigger: "blur",
			}],
			maxTemperature: [{
				required: true,
				message: "最高温度不能为空",
				trigger: "blur",
			}],
			minHumidity: [{
				required: true,
				message: "最低湿度不能为空",
				trigger: "blur",
			}],
			maxHumidity: [{
				required: true,
				message: "最高湿度不能为空",
				trigger: "blur",
			}],
			minPm25: [{
				required: true,
				message: "最低pm25不能为空",
				trigger: "blur",
			}],
			maxPm25: [{
				required: true,
				message: "最高pm25不能为空",
				trigger: "blur",
			}],
			minPm10: [{
				required: true,
				message: "最低pm10不能为空",
				trigger: "blur",
			}],
			maxPm10: [{
				required: true,
				message: "最高pm10不能为空",
				trigger: "blur",
			}],
		}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);

	/** 查询阈值设置列表 */
	function getList() {
		loading.value = true;
		listSet(queryParams.value).then(response => {
			setList.value = response.rows;
			total.value = response.total;
			loading.value = false;
		});
	}

	// 取消按钮
	function cancel() {
		open.value = false;
		reset();
	}

	// 表单重置
	function reset() {
		form.value = {
			setId: null,
			areaNo: null,
			minTemperature: null,
			maxTemperature: null,
			minHumidity: null,
			maxHumidity: null,
			minPm25: null,
			maxPm25: null,
			minPm10: null,
			maxPm10: null,
			updatetime: null,
			operatorId: null,
			isSms: null,
			temInterval: null,
			waterInterval: null,
			smokeInterval: null,
			infraredInterval: null,
			airInterval: null,
			alarmPhone: null,
			alarmEmail: null,
			status: 0,
			delflag: null
		};
		proxy.resetForm("setRef");
	}

	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.pageNum = 1;
		getList();
	}

	/** 重置按钮操作 */
	function resetQuery() {
		proxy.resetForm("queryRef");
		handleQuery();
	}

	/** 查询区列表 */
	function getAreaList() {
		listArchiveArchArea(queryParams.value).then(response => {
			ArchiveArchAreaList.value = response.rows;
		});
	}


	// 多选框选中数据
	function handleSelectionChange(selection) {
		ids.value = selection.map(item => item.setId);
		single.value = selection.length != 1;
		multiple.value = !selection.length;
	}

	/** 新增按钮操作 */
	function handleAdd() {
		reset();
		open.value = true;
		title.value = "添加阈值设置";
	}

	/** 修改按钮操作 */
	function handleUpdate(row) {
		reset();
		const setId = row.setId || ids.value
		getSet(setId).then(response => {
			form.value = response.data;
			open.value = true;
			title.value = "修改阈值设置";
		});
	}

	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["setRef"].validate(valid => {
			if (valid) {
				if (form.value.setId != null) {
					updateSet(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						open.value = false;
						getList();
					});
				} else {
					addSet(form.value).then(response => {
						proxy.$modal.msgSuccess("新增成功");
						open.value = false;
						getList();
					});
				}
			}
		});
	}

	/** 删除按钮操作 */
	function handleDelete(row) {
		const setIds = row.setId || ids.value;
		proxy.$modal.confirm('是否确认删除阈值设置编号为"' + setIds + '"的数据项？').then(function() {
			return delSet(setIds);
		}).then(() => {
			getList();
			proxy.$modal.msgSuccess("删除成功");
		}).catch(() => {});
	}

	/** 导出按钮操作 */
	function handleExport() {
		proxy.download('environment/set/export', {
			...queryParams.value
		}, `set_${new Date().getTime()}.xlsx`)
	}
	getAreaList();
	getList();
</script>
